<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			li{
				list-style: none;
			}
			p{
				font-size: 12px;
				transition: all 1s;
			}
			.scal{
				font-size: 70px;
			}
		</style>
	</head>
	<body>
		<ul class="test">
			<li>第1段话</li>
			<li>第2段话</li>
			<li>第3段话</li>
			<li>第4段话</li>
			<li>第5段话</li>
		</ul>
		<p>JavaScript</p>
		<script type="text/javascript">
			var ul = document.querySelector(".test");
			var count = 0;
			setInterval(function(){
				count++;
				var aLi = document.querySelectorAll(".test li");
				ul.appendChild(aLi[0]);//appendChild:把第一个li放到最后面
				console.log(count);
			},1000);
			
			
			var pEle = document.querySelector("p");
			setInterval(function(){
				pEle.classList.toggle("scal");
			},1000);
		</script>
	</body>
</html>
